<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
	<title>导入话术</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		.body{
			max-height: 800px;
    		overflow: auto;
		}
		.ant-modal-body{
			padding: 32px 32px 24px;
			font-size: 14px;
    		line-height: 1.5;
		}
		.dialog-title{
			font-size: 17px;
		    width: 100%;
		    text-align: center;
		    margin-top: 2px;
		    font-weight: 600;
		    line-height: 24px;
		    letter-spacing: 1px;
		}
		.row{
			display: flex;
		    -webkit-box-align: start;
		    align-items: flex-start;
		    margin-bottom: 33px;
		}
		.ont-size-14{
    		color: rgba(0,0,0,.85);
		}
		.font-color-85{
			font-size: 14px;
		}
		.font-bold{
			font-weight: 500;
		}
		.text-blue, .text-bule-hover:hover {
		    color: #1890ff;
		}
		.import-dialog .row .item .item-block {
		    margin-top: 8px;
		}
		.csv-uploader{
			margin-bottom: 8px;
		}
		.csv-uploader .upload-input {
		    width: 0;
		    height: 0;
		    visibility: hidden;
		    display: none;
		}
		.csv-uploader .upload {
		    width: 139px;
		    height: 42px;
		    display: -webkit-box;
		    display: flex;
		    -webkit-box-align: center;
		    align-items: center;
		    padding: 12px 28px 13px;
		    /*border: 1px solid #d9d9d9;*/
		    border-radius: 2px;
		    word-break: keep-all;
		}
		.clickable {
		    cursor: pointer;
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
		}
		.importExcel_button_container{
			display: flex;
			justify-content: flex-end;
			padding-top: 10px;
		}
	</style>
</head>
<body>
	<form class="layui-form" action="" id="form2">
		<div class="body ant-modal-body">
			<!-- <h2 class="dialog-title">导入企业话术</h2>  -->
			<div class="row">
				<span class="font-size-14 font-color-85 font-bold">第一步：</span> 
				<div class="item">
					<p class="font-size-14 font-color-85">下载导入模版，按照模版填写内容</p> 
					<a href="huashu_download_excel.html">
						<div class="item-block">
							<span class="text-blue">下载导入模版</span>
						</div>
					</a>
				</div>
			</div> 
			<div class="row">
				<span class="font-size-14 font-color-85 font-bold">第二步：</span> 
				<div class="item"><p class="font-size-14 font-color-85">上传文件，将填写好的模版上传</p> 
					<div class="item-block">
						<section class="csv-uploader" style="">
							<input type="hidden" name="file_path" id="file_path" value=""/>
							<input type="hidden" name="file_name" id="file_name" value="" />
							<button type="button" class="layui-btn layui-btn-normal" id="test2">
					 	      <i class="layui-icon">&#xe67c;</i>上传表格
					 	    </button>
					 	    <div class="layui-form-mid layui-word-aux" id="file_name_show"></div>
						</section>
					</div>
				</div>
			</div> 
			<div class="layui-form-item importExcel_button_container">
		 	<!--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">取消</button>-->
		 	<a type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="submitForm()">导入</a>
		 	<!-- <a type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="submitForm()">导入</a> -->

		  	</div>
		</div>
	</form>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/ajax.js"></script>
<script type="text/javascript">
	function submitForm(){
		var formData = $('#form2').serialize();	
		myAjaxPost(false, true, '', formData, function (resp) {
			if (resp.status == 'success') {
				// console.log(resp);
				tusi(resp.msg);
				setTimeout(function(){
					//parent.layer.closeAll('iframe');
					parent.location.href = 'quick_reply.html';
				},2000);
			}else{
				alert(resp.msg);
				if(resp.data == 1){
					$('#file_path').val('');
					$('#file_name').val('');
					$('#file_name_show').html('');
				}
			}
		});
	}
	//表单
	layui.use('form', function(){
	  var form = layui.form;
	  
	  //监听提交
	  form.on('submit(formDemo)', function(data){
	    layer.msg(JSON.stringify(data.field));
	    return false;
	  });

	});
	// 上传
	layui.use('upload', function(){
	  var upload = layui.upload;
	   
	  //执行实例
	  var uploadInst = upload.render({
		 accept: 'file'
		,field: 'file'
	    ,elem: '#test2' //绑定元素
	    ,url: 'upload_file_huashu.html' //上传接口
	    ,done: function(res){
	      //上传完毕回调
		  layer.msg(res.msg);
		  if(res.status == 'success'){
			  $('#file_path').val(res.data.filePath);
		      $('#file_name').val(res.data.fileName);
		      $('#file_name_show').html(res.data.fileName);
		  }
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	});
</script>
</html>